<!--
 * @LastEditors: 杜康
 * @LastEditTime: 2021-11-17 17:00:48
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>绘制Tutorial案例</title>
</head>

<body>
  <div id="mountNode" />
  <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.7.1/dist/g6.min.js"></script>
  <script>
    // 加载真实数据
    const main = async () => {
      const response = await fetch(
        'https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json',
      )
      const remoteData = await response.json()
      // 数据中配置节点属性
      const nodes = remoteData.nodes
      nodes.forEach(node => {
        if (!node.style) {
          node.style = {}
        }
        switch (node.class) {
          case 'c0':
            node.type = 'circle'
            break
          case 'c1':
            node.type = 'rect'
            node.size = [35, 20]
            break
          case 'c2':
            node.type = 'ellipse'
            node.size = [35, 20]
            break
          default:
        }
      })
      // 数据中配置边属性
      const edges = remoteData.edges
      edges.forEach(edge => {
        if (!edge.style) {
          edge.style = {}
        }
        edge.style.lineWidth = edge.weight
        // 数据配置的属性会覆盖全局默认设置的属性
        edge.style.opacity = 0.6
        edge.style.stroke = 'grey'
      })
      // 将图实例化
      const graph = new G6.Graph({
        container: 'mountNode',
        width: 1920,
        height: 1080,
        // 适应画布大小
        // fitView: true,
        // 画布周边留白
        // fitViewPadding: [10, 10, 10, 10],
        // 节点默认的全局配置
        defaultNode: {
          size: 30,
          // 节点的样式
          style: {
            fill: 'steelblue',
            stroke: '#666',
            lineWidth: 1
          },
          // 节点的标签样式
          labelCfg: {
            style: {
              fill: '#fff'
            }
          }
        },
        // 边默认的全局配置
        defaultEdge: {
          style: {
            opacity: 0.6,
            stroke: 'grey'
          },
          labelCfg: {
            // 边上的标签文本根据边的方向旋转
            autoRoute: true
          }
        },
        // 图布局配置
        layout: {
          type: 'force',
          preventOverlap: true,
          // 指定边距离为100
          linkDistance: 100
        }
      })
      // 给图设置数值，渲染图
      graph.data(remoteData)
      graph.render()
    }
    main()
  </script>
</body>

</html>